import { useState } from 'react';

type TaskType  = {
	id: number;
	text: string;
	done: boolean;
};
export default function TaskList({
	tasks,
	onChangeTask,
	onDeleteTask
}: {
	tasks: TaskType[],
	onChangeTask: (task: TaskType) => void,
	 onDeleteTask: (id: number) => void
}) {
	return (
		<ul>
			{tasks.map(task => (
				<li key={task.id}>
					<Task
						task={task}
						onChange={onChangeTask}
						onDelete={onDeleteTask}
					/>
				</li>
			))}
		</ul>
	);
}

function Task(
	{ task, onChange, onDelete } : { task: TaskType, onChange: (task: TaskType) => void, onDelete: (id: number) => void }
) {
	const [isEditing, setIsEditing] = useState(false);
	let taskContent;
	if (isEditing) {
		taskContent = (
			<>
				<input
					value={task.text}
					onChange={e => {
						onChange({
							...task,
							text: e.target.value
						});
					}} />
				<button onClick={() => setIsEditing(false)}>
					Save
				</button>
			</>
		);
	} else {
		taskContent = (
			<>
				{task.text}
				<button onClick={() => setIsEditing(true)}>
					Edit
				</button>
			</>
		);
	}
	return (
		<label>
			<input
				type="checkbox"
				checked={task.done}
				onChange={e => {
					onChange({
						...task,
						done: e.target.checked
					});
				}}
			/>
			{taskContent}
			<button onClick={() => onDelete(task.id)}>
				Delete
			</button>
		</label>
	);
}